<template>
	<div class="bgimg" :style="{ height: bodyHeight + 'px' }">
		<div class="reg">
			<van-nav-bar @click-right="onClickRight">
				<span slot="right">
       				下载
      			</span>
			</van-nav-bar>
		</div>
		<div class="login">
			<div class="title">
				<van-image width="100" height="100" :src="picture" round/>
			</div>
			<div class="main">
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="userName" clearable placeholder="请输入帐号（数字+字母组合）'" label="用户帐号" left-icon="contact" maxlength="20" />
					</van-cell-group>
				</div>
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="userPassword" clearable placeholder="设置密码（6~20位数字+字母组合）" label="用户密码" left-icon="smile-o" maxlength="20" type="password" />
					</van-cell-group>
				</div>
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="userPassword2" clearable placeholder="请再次输入密码" label="确认密码" left-icon="smile-o" maxlength="20" type="password" />
					</van-cell-group>
				</div>
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="InviteCode" disabled placeholder="请输入推荐码" label="推荐码" left-icon="thumb-circle-o" maxlength="20" />
					</van-cell-group>
				</div>
				<div class="text" style="padding-left: 15px;">
					<van-checkbox v-model="checked" icon-size="16px" checked-color="#07c160" @click="toggle()">
						<span style="color: #07c160;font-size: 14px;text-decoration:underline;">阅读并同意《用户协议》</span>
					</van-checkbox>
				</div>
				<div class="btn">
					<van-button type="primary" @click.native="Register" :loading="loading">注册</van-button>
				</div>
			</div>
		</div>
		<van-popup v-model="show" position="bottom">
			<div style="color: black;padding: 10px 0px;font-size: 20px;" align="center">注册协议</div>
			<div style="padding: 10px;" v-html="protocol">
				注册协议
			</div>
			<div style="padding: 10px;">
				<van-button type="primary" style="width: 100%;" @click.native="sure">了解并同意</van-button>
			</div>
		</van-popup>
		<van-popup v-model="show2" style="width: 100%;height: 100%;border-radius: 5px;background: #2c3145;text-align: left;" :close-on-click-overlay="false">
			<div style="padding: 15px 25px;color:white;background: #2c3145;text-align: center;">
				<span>注册成功</span>
			</div>
			<div style="color: white;font-size: 13px;background: #2c3145;">
				<div align="center" style="padding-top: 30px;padding-bottom: 10px;margin-left: 15px;margin-right: 15px;">
					<img src="../assets/images/zjc.png" style="width: 80px;height: 80px;" />
					<div style="font-size: 16px;">备份助记词</div>
					<div style="padding-top: 10px;font-size: 14px;">请准确抄写并安全备份助记词</div>
				</div>
				<van-grid :column-num="5" style="padding-top: 10px;padding-bottom: 10px;border-top: 1px solid #383f56;border-bottom: 1px solid #383f56;margin-left: 10px;margin-right: 10px;">
					<van-grid-item v-for="(item,index) in list" :key="Math.random()">
						<div style="border: 1px solid rgb(93,107,151);padding: 3px 10px;border-radius: 5px;background: rgb(93,107,151);">
							<span v-text="item"></span>
						</div>
					</van-grid-item>
				</van-grid>
				<div style="padding: 10px 15px;color: #3FB776;">
					<div>警告：助记词是唯一找回签钱包密码的重要凭证，请务必记录并保管好助记词，建议抄写另存！</div>
				</div>
				<div>
					<div id="copyText" v-text="listCopy" style="color: transparent;background-color: transparent;position: absolute;z-index: 0;-webkit-user-select: text;word-wrap: break-word;width: 80%;"></div>
				</div>
				<div style="padding: 10px 70px;">
					<van-button slot="button" size="normal" type="primary" style="height: 38px;line-height: 36px;width: 100%;" @click="sureOk" class="copybtn" :data-clipboard-text="listCopy">确定</van-button>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import { base } from './../utils/api';
	let _this;
	export default {
		name: 'RegisterTrue',
		components: {},
		props: {},
		data() {
			return {
				bodyHeight: '',
				userName: '',
				userPassword: '',
				userPassword2: '',
				InviteCode: '',
				checked: false,
				k: '', // 凭证K值
				v: '', // 凭证V值
				loading: false,
				show: false,
				show2: false,
				protocol: '',
				list: [],
				listCopy: '',
				picture: require('./../assets/images/my.png')
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {
			userName: function() {
				this.userName = this.userName.replace(/[\u4e00-\u9fa5]/ig, ''); // 帐号不能输入中文
			},
			userPassword: function() {
				this.userPassword = this.userPassword.replace(/[\u4e00-\u9fa5]/ig, ''); // 密码不能输入中文
			},
			userPassword2: function() {
				this.userPassword2 = this.userPassword2.replace(/[\u4e00-\u9fa5]/ig, ''); // 密码不能输入中文
			},
			InviteCode: function() {
				this.InviteCode = this.InviteCode.replace(/[\u4e00-\u9fa5]/ig, ''); // 推荐码不能输入中文
			}
		},
		computed: {},
		methods: {
			Register() {
				if(!this.userName) {
					this.$toast('帐号不能为空');
					return false;
				} else {
					if(this.userName.length < 4 || this.userName.length > 20) {
						this.$toast('帐号长度在4-20之间');
						return false;
					}
				}
				if(!this.userPassword) {
					this.$toast('密码不能为空');
					return false;
				} else {
					if(this.userPassword.length < 6 || this.userPassword.length > 20) {
						this.$toast('密码长度在6-20之间');
						return false;
					}
				}
				if(!this.userPassword2) {
					this.$toast('确认密码不能为空');
					return false;
				} else {
					if(this.userPassword2.length < 6 || this.userPassword2.length > 20) {
						this.$toast('确认密码长度在6到20位之间');
						return false;
					}
				}
				if(this.checked != true) {
					this.$toast('请阅读并同意用户协议');
					return false;
				}
				this.loading = true;
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						_this.k = res.data.k;
						_this.v = res.data.v;
						base.getRegister({
							'userName': this.userName,
							'code': this.InviteCode,
							'encryptedData': this.rsaEncrypt(this.userPassword + ',' + this.userPassword2 + ',' + this.v),
							'key': this.k
						}).then(res => {
							if(res.code == 200) {
								this.list = res.data.trim().split(" ");
								this.listCopy = res.data;
								this.show2 = true;
							}
							this.$toast(res.msg);
							this.loading = false;
						})
					}
				})
			},
			onClickRight() {
				window.location.href="https://app.newestate.vip/apps/install.html?targetDir=estate";
			},
			sure() {
				this.checked = true;
				this.show = false;
			},
			toggle() {
				if(this.checked == true) {
					this.checked = false;
				} else {
					this.checked == true;
					this.show = true;
				}
				base.getRegisterDiscovers().then(res => {
					if(res.code == 200) {
						this.protocol = res.data.value;
					}
				})
			},
			sureOk() {
				let clipboard = new ClipboardJS('.copybtn')
				clipboard.on('success', e => { 
					_this.$toast('助记词复制成功');
					setTimeout(() => {
						window.location.href="https://app.newestate.vip/apps/install.html?targetDir=estate";
						_this.show2 = false;
					}, 1000);
					clipboard.destroy();
				})
				clipboard.on('error', e => { 
					_this.$toast('助记词复制失败');
					clipboard.destroy();
				})
			}
		},
		created() {},
		mounted() {
			this.bodyHeight = document.documentElement.clientHeight;
			this.InviteCode = this.$route.query.id;
		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.reg /deep/ .van-nav-bar {
		background-color: transparent;
	}
	
	.reg /deep/ .van-nav-bar__left,
	.van-nav-bar__right {
		color: white;
	}
	
	.reg /deep/ .van-nav-bar .van-icon {
		color: white;
	}
	
	.reg /deep/ .van-hairline--bottom::after {
		border: 0;
	}
	
	.bgimg {
		height: 100%;
		background: url('../assets/images/bg.jpg') no-repeat left top;
		background-size: cover;
	}
	
	.title {
		text-align: center;
		font-size: 26px;
		color: white;
		margin: 0 auto;
		margin-top: 50px;
	}
	
	.main {
		position: relative;
		padding: 30px 20px;
	}
	
	.text {
		padding-bottom: 10px;
	}
	
	.btn .van-button--normal {
		width: 100%;
	}
	
	.text /deep/ .van-cell {
		background-color: transparent;
	}
	
	.text /deep/ .van-cell-group {
		background-color: transparent;
	}
	
	.text /deep/ .van-field__left-icon .van-icon,
	.van-field__right-icon .van-icon {
		color: white;
	}
	
	.text /deep/ .van-field__label {
		color: white;
	}
	
	.text /deep/ .van-field__control {
		color: white;
	}
	
	.text /deep/ .van-field__label {
		width: 65px;
	}
	
	.text /deep/ .van-hairline--top-bottom::after,
	.van-hairline-unset--top-bottom::after {
		border: 0;
	}
	
	.forget {
		font-size: 13px;
		float: right;
		color: white;
		padding-top: 20px;
	}
	
	/deep/ .van-grid-item__content {
		background: #2c3145;
		padding: 10px 5px;
	}
	
	/deep/ .van-hairline--top::after {
		border: 0;
	}
	
	/deep/ .van-grid-item__content::after {
		border: 0;
	}
	
	/deep/ .van-grid-item__content {
		float: left;
	}
	
	/deep/ .van-field__control:disabled {
		-webkit-text-fill-color: white;
	}
</style>